<template>
  <div>
    <input
      v-model="searchQuery"
      placeholder="Search..."
      @input="handleSearch"
    />
    <button @click="handleSort">Sort {{ sortAsc ? "↑" : "↓" }}</button>
    <select v-model="filterCategory" @change="handleFilter">
      <option value="">All</option>
      <option value="A">Category A</option>
      <option value="B">Category B</option>
    </select>

     <RecycleScroller
      class="scroller"
      :items="visibleItems"
      :item-size="50"
      key-field="id"
    >
      <template v-slot="{ item }">
        <div class="item">
          {{ item.name }} ({{ item.category }})
        </div>
      </template>
    </RecycleScroller>
  </div>
</template>

<script>

export default defineComponent({
  setup() {
     const allItems = Array.from({ length: 10000 }, (_, i) => ({
      id: i + 1,
      name: `Item ${i + 1}`,
      category: i % 2 === 0 ? 'A' : 'B', // 模拟分类
    }));

    const searchQuery = ref("");
    const sortAsc = ref(true);
    const filterCategory = ref("");

    const handleSearch = () => {
      // 搜索逻辑已在 computed 中处理
    };

    const handleFilter = () => {
      // 筛选逻辑已在 computed 中处理
    };

    const handleSort = () => {
      sortAsc.value = !sortAsc.value;
    };

    const visibleItems = computed(() => {
      let items = allItems;
      // 搜索
      if (searchQuery.value) {
        items = items.filter(item =>
          item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
        );
      }

      // 筛选
      if (filterCategory.value) {
        items = items.filter(item => item.category === filterCategory.value);
      }

      // 排序
      items = items.slice().sort((a, b) =>
        // sortAsc.value ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
        sortAsc.value ? a.id-b.id : b.id-a.id
      );

      return items;
    });

    return {
      searchQuery,
      sortAsc,
      filterCategory,
      visibleItems,
      handleSearch,
      handleSort,
      handleFilter,
    };
  },
});
</script>

<style>
.scroller {
  height: 500px;
  overflow-y: auto;
}

.item {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  padding: 0 10px;
}
</style>